<template>
  <div>
    用户 token : {{token}}
    <!-- 取得模块状态下的 state 数据固定写法 $store.state.模块名.字段名 -->
    <br>
    应用名 : {{name}}
    <br>
    <!-- 使用带有命名空间锁的函数方法一, 加上模块路径和 / 即可 -->
    <!-- <button @click="$store.commit('user/setToken')">修改 token</button>
    <button @click="$store.commit('setting/setName')">修改 name</button> -->

    <!-- <button @click="setToken">修改 token</button>
    <button @click="setName">修改 name</button> -->

    <button @click="setToken">修改 token</button>
  </div>
</template>

<script>
// 引入vuex全局的辅助函数
import { mapMutations, mapGetters } from "vuex"
// 调用模块状态下函数的方法三, 使用一个工厂函数生成基于某个模块的辅助函数
import { createNamespacedHelpers } from 'vuex'
console.log( createNamespacedHelpers('user') );
// 如果 mapMutations 已经被占用, 可以在解构的过程中进行改名
const {mapMutations: userMapMutations} = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapGetters(['token', 'name'])
  },
  methods: {
    // 使用带有命名空间锁的函数方法二
    // 可以在辅助函数添加第一个可选参数作为模块名
    // ...mapMutations(['setToken', 'setName'])
    // ...mapMutations('user', ['setToken']),
    ...mapMutations('setting', ['setName']),
    ...userMapMutations(['setToken'])
  }
}
</script>

<style>

</style>